<template>
  <div class="position-banner wh">
    <swiper :options="swiperOption" ref="mySwiper" >
      <!-- slides -->
      <swiper-slide class="slide1">
        <div class="slide1-title">
          <i class="s-icon1"></i><span>竞猜游戏业务</span>
        </div>
        <div class="slide1-content">
          <p>由中富竞娱文体科技有限公司打造的“球爷”APP是一款可信、可靠、安全、方便的专业体育资讯媒体和游戏平台。“球爷”APP以强大的数据库作为支持，为用户提供赛事资讯，赛事数据、以及趣味竞猜等多项服务。在这里用户可以享受看新闻→游戏→看球→聊天的一条龙体验。目前我们共开放了足球、篮球、网球、电竞等四项运动，琳琅满目的各项赛事贯穿全年，充分满足用户的游戏需求。</p>
        </div>
        <img class="quiz" src="../assets/images/business/project_quiz_pic.png" alt="">
      </swiper-slide>
      <swiper-slide class="slide1">
        <div class="slide1-title">
          <i class="s-icon2"></i><span>棋牌游戏业务</span>
        </div>
        <div class="slide1-content">
          <p>棋牌文化是中国历史文化中最璀璨的一颗明珠，它有着深厚的文化底蕴，彰显出人们生活中极具智慧、乐趣的一面。</p>
          <p>中富竞娱AK棋牌大厅软件是一款专为中富竞娱公司量身打造定制的平台界面游戏软件，服务于全球广大用户。</p>
          <p>AK棋牌包含麻将、扑克以及休闲类游戏等多种玩法，凭借优质的游戏产品吸引聚集海量线上及线下俱乐部用户，并为玩家提供了优质的娱乐服务。</p>
        </div>
        <img class="poker" src="../assets/images/business/project_poker_pic.png" alt="">
      </swiper-slide>
     <!-- <swiper-slide class="slide2">
        <div class="slide1-title">
          <span>奥林匹克知识与智力大赛</span>
        </div>
        <div class="slide1-content">
          <p>奥林匹克知识与智力大赛是全球首个以奥林匹克知识传播为目的的在线竞技赛事。比赛依托互联网平台，以主流电视媒体、网络媒体、平面媒体为传播载体。通过精准的媒体宣传，打造基于奥林匹克知识传播的全新IP。赛事题目涵盖奥运历史文化及28类奥运项目，对奥林匹克知识与文化的传播起到了重要的推动作用。</p>
        </div>
        <router-link to="/intelligenceCompetition">
          <div class="slide1-button">
            <span>查看详情</span>
          </div>
        </router-link>
      </swiper-slide>
      <swiper-slide class="slide3">
        <div class="slide1-title slide1-sport">
          <span>奥林匹克博览会官方项目</span>
          <p class="slide-p">奥林匹克智力运动馆</p>
        </div>
        <div class="slide1-content">
          <p>为弘扬奥林匹克精神，传播奥林匹克文化，配合2022年北京冬奥会的举办、宣传和普及奥运体育项目和知识，经国际奥委会批准，由IOC，萨基会主办，北京奥委会、中国奥委会新华社支持的奥林匹克博览会——奥林匹克智力运动馆工程，将于2018年在中国开始举办活动通过将奥林匹克元素和内容互联网化和游戏化，以更为生动、高效的方式快速传播奥林匹克知识，让更多人群以一种全新的方式参与奥运并体会奥林匹克精神。</p>
        </div>
        <router-link to="/olympicSport">
          <div class="slide1-button">
            <span>查看详情</span>
          </div>
        </router-link>
      </swiper-slide>-->
      <!-- Optional controls -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'mainBusiness',
  data () {
    return {
      swiperOption: {
        notNextTick: true,
        speed: 1000,
        autoplay: false,
        grabCursor: true,
        setWrapperSize: true,
        autoplayDisableOnInteraction: false,
        height: 565,
        loop: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        mousewheelControl: true,
        observeParents: true
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  }
}
</script>

<style scoped>
  .wh{
    width: 1200px;
    height: 565px;
  }
  .swiper-container{
    width: 1110px;
  }
  .swiper-slide{
    width: 1110px;
    height: 565px;
  }
  .slide1{
    background: url("../assets/images/business/mainBusiness.png") no-repeat center;
    background-size: 1110px 565px;
  }
  .slide2{
    background: url("../assets/images/business/olympic-bg.png") no-repeat center;
    background-size: 1110px 565px;
  }
  .slide3{
    background: url("../assets/images/business/sport-bg.png") no-repeat center;
    background-size: 1110px 565px;
  }
  .swiper-button-prev{
    width: 53px;
    height: 85px;
    background: url("../assets/images/news_left.png") no-repeat center;
    left: -5px;
  }
  .swiper-button-prev:hover{
    background: url("../assets/images/news_left_hover.png") no-repeat center;
  }
  .swiper-button-next{
    width: 53px;
    height: 85px;
    background: url("../assets/images/news_right.png") no-repeat center;
    right: -11px;
  }
  .swiper-button-next:hover{
    background: url("../assets/images/news_right_hover.png") no-repeat center;
  }
  .slide1-title{
    width: 508px;
    height: 100px;
    margin-left: 84px;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .s-icon1{
    display: inline-block;
    width: 68px;
    height: 56px;
    background: url("../assets/images/business/project_quiz_icon.png") no-repeat center;
    background-size: 68px 56px;
    vertical-align: middle;
  }
  .s-icon2{
    display: inline-block;
    width: 68px;
    height: 56px;
    background: url("../assets/images/business/project_poker.png") no-repeat center;
    background-size: 68px 56px;
    vertical-align: middle;
  }
  .slide1-content{
    width: 592px;
    margin-top: 44px;
    color: #c8c5c5;
    line-height: 32px;
  }
  .slide1-content p{
    width: 394px;
    margin: 0 auto;
    text-indent: 2em;
    text-align: justify;
  }
  .quiz{
    position: absolute;
    top: 56px;
    right: 158px;
    width: 334px;
    height: 440px;
    transition: all .3s;
  }
  .quiz:hover{
    transform: scale(1.1);
  }
  .poker{
    position: absolute;
    top: 135px;
    right: 120px;
    width: 426px;
    height: 315px;
    transition: all .3s;
  }
  .poker:hover{
    transform: scale(1.1);
  }
  .slide1-sport{
    flex-direction: column;
  }
  .slide-p{
    font-size: 22px;
  }
  .slide1-button{
    cursor: pointer;
    position: absolute;
    left: 158px;
    bottom: 25px;
    width: 220px;
    height: 50px;
    transform: skew(-10deg);
    background-color: #2f3aad;
    font-size: 20px;
    color: #c2c7fa;
    text-align: center;
    line-height: 50px;
  }
  .slide1-button span{
    display: block;
    transform: skew(10deg);
  }
  .slide1-button:hover{
    background-color: #ba3382;
    color: #fff;
  }
</style>
